<template>
    <view :class="'stepper stepper-' + type">
            <!-- 减号 -->
            <text :class="'sign ' + (valueClone <= min ? 'disabled' : 'normal')" @tap="delCount" :data-index="index">-</text>
            <!-- 数值 -->
            <input class="number" type="number" @input="bindManual" :value="valueClone" />
            <!-- 加号 -->
            <text :class="'sign ' + (valueClone >= max ? 'disabled' : 'normal')" @tap="addCount" :data-index="index">+</text>
        </view>
</template>

<script>
// components/numinput/numinput.js
export default {
    data() {
            return {
                valueClone: ''
            };
        },
        /**
         * 组件的属性列表
         */
        props: {
            value: {
                //数量
                type: Number,
                default: 0
            },
            min: {
                type: Number,
                default: 0
            },
            max: {
                type: Number,
                default: 10
            },
            index: {
                type: String,
                default: '-1'
            },
            type: {
                type: String,
                default: 'min'
            },
            indexx: {
                type: String,
                default: '-1'
            }
        },
        /**
         * 组件的方法列表
         */
        methods: {
            /* 加数 */
            addCount: function (e) {
                var value = this.value; // 总数量-1
    
                if (value < this.max) {
                    this.value++;
                } else {
                    return;
                } // 将数值与状态写回
    
                this.setData({
                    valueClone: this.value
                });
                this.$emit(
                    'change',
                    {
                        detail: {
                            value: this.value,
                            index: this.index,
                            indexx: this.indexx
                        }
                    },
                    {}
                );
            },
    
            /* 减数 */
            delCount: function (e) {
                var value = this.value; // 商品总数量-1
    
                if (value > this.min) {
                    this.value--;
                } else {
                    return;
                } // 将数值与状态写回
    
                this.setData({
                    valueClone: this.value
                });
                this.$emit(
                    'change',
                    {
                        detail: {
                            value: this.value,
                            index: this.index,
                            indexx: this.indexx
                        }
                    },
                    {}
                );
            },
            bindManual: function (e) {
                if (e.detail.value <= this.max) {
                    this.setData({
                        valueClone: e.detail.value
                    });
                } else {
                    this.setData({
                        valueClone: this.value
                    });
                }
    
                this.$emit(
                    'change',
                    {
                        detail: {
                            value: this.value,
                            index: this.index,
                            indexx: this.indexx
                        }
                    },
                    {}
                );
            }
        },
        watch: {
            value: {
                handler: function (newVal, oldVal) {
                    this.valueClone = newVal;
                },
    
                immediate: true
            }
        }
};
</script>
<style>
@import './index.css';
</style>
